var React = require('react-native');
var {width:WIDTH} = require('Dimensions').get('window');
var {msg} = require('iflux-native');
var BtnContainer = require('./button');

var {
  View,
  Text,
  Image,
  Platform,
  StyleSheet,
  PixelRatio,
  TouchableWithoutFeedback
} = React;

var noop = () => {};

var MockSearch = React.createClass({


  getDefaultProps: function() {
    return {
      onRight: noop,
	    onMockSearchLayout: noop,
      onCart: noop
    };
  },


  render() {
    return (
      <View
	      style={[styles.search, this.props.style]}
	      onLayout={this.props.onMockSearchLayout}>
        {!this.props.back ? null :
          <BtnContainer
            style={styles.leftMenu}
            onPress={() => msg.emit('route:backToLast')}>
            <Image style={styles.imgLeft} source={require('img/left.png')}/>
          </BtnContainer>
        }

        <TouchableWithoutFeedback onPress={this._handleSearch}>
          <View style={styles.searchBox}>
            <View style={styles.textInputView}>
              <Text style={styles.searchTxt}>
                {this.props.q != '' ? this.props.q : '搜索商品'}
              </Text>
              <Image style={styles.iconSearch} source={require('img/search_grey.png')} />
            </View>
          </View>
        </TouchableWithoutFeedback>

        {this.props.onRight()}
      </View>
    )
  },


  /**
   * 跳去搜索
   */
  _handleSearch() {
    // 搜索页面是替换本页还是在本页后新增一页
    var action  = this.props.replaceRoute ? 'route:replaceRoute' : 'route:goToNext';
    msg.emit(action, {
      sceneName: 'GoodsSearch'
    })
  }
});

var styles = StyleSheet.create({
  search: {
    flexDirection: 'row',
    alignItems: 'center',
    paddingTop: Platform.OS === 'ios' ? 30 : 10,
    paddingRight: 10,
    paddingBottom: 10,
    paddingLeft: 10,
    width: WIDTH,
    backgroundColor: '#3d85cc'
  },
  searchBox: {
    flex: 1,
    height: 31,
  },
  iconSearch: {
    position: 'absolute',
    top: 5,
    left: 10,
    width: 19,
    height: 19,
    backgroundColor: 'transparent'
  },
  textInputView: {
    flex: 1,
    justifyContent: 'center',
    paddingRight: 30,
    paddingLeft: 33,
    height: 31,
    backgroundColor: '#fff',
    borderWidth: 1 / PixelRatio.get(),
    borderColor: '#e1e1e1',
    borderRadius: 3
  },
  searchTxt: {
    color: '#b5b5b5',
    paddingRight: 3,
    fontSize: 14,
    textAlign: 'center'
  },
  leftMenu: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    paddingRight: 20,
    height: 31,
    alignItems: 'center'
  },
  imgLeft: {
    marginRight: 10,
    width: 10,
    height: 19
  },
});

module.exports = MockSearch;
